<template>
  <!-- 导航部分 -->
  <div class="content">
    <!-- 列表导航栏 -->
    <ul class="list">
      <li>
        <router-link to="/">商品</router-link>
      </li>
      <li>
        <router-link to="/pingjia">评价</router-link>
      </li>
      <li>
        <router-link to="/shangjia">商家</router-link>
      </li>
     
    </ul>
  </div>
    <div class="listContent">
    <div class="left">
      <router-view></router-view>
    </div>
    <div class="right"></div>
  </div>
</template>

<script>
export default {};
</script>
<style scoped>
.content {
  width: 800px;
  height: 60px;
  margin: 0 auto;
  align-items: center;
  border-bottom: 1px solid #f3f5f7;

  /* background-color: aqua; */
}
.list {
  flex: 1;
 height: 60px;
  display: flex;
  justify-content:space-evenly;
  line-height: 60px;
  color: #fff;
  font-size: 20px;
  padding-left: 0;
}
.list li{
  margin-left: 0;
 list-style: none;

}
.list a{
  position: relative;
  text-decoration: none;
  color: black;
}
.list a:hover{
  color: red;
}

.listContent{
  width: 800px;
  height:1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* background-color: red; */
  /* justify-content: center; */
}
</style>
